<template>
  <div class="rc-container">
    <div class="box-header">灾情分析</div>
    <div class="box-content">
      <div class="rc-box1">
        <div class="title">小标题</div>
        <div class="main">
          <div class="left">
            <img class="icon" src="@/assets/images/wj.png" />
            <div class="text">
              <span class="num">2313</span>
              <span>同比增长：<span class="prec">10%</span></span>
            </div>
          </div>
          <div class="right" id="rcb1-chart"></div>
        </div>
      </div>
      <div class="rc-box2">
        <div class="title">小标题</div>
        <div class="main">
          <div class="left">
            <img class="icon" src="@/assets/images/fire.png" />
            <div class="text">
              <span class="num">243</span>
              <span>同比下降：<span class="prec">6%</span></span>
            </div>
          </div>
          <div class="right" id="rcb2-chart"></div>
        </div>
      </div>
      <div class="rc-box3">
        <div class="title">小标题</div>
        <div class="main" id="rcb3-chart"></div>
      </div>
      <div class="rc-box4">
        <div class="title">警情数量</div>
        <div class="main1">
          <div class="item">
            <div class="num">15126</div>
            <div>警情数量(起)</div>
          </div>
          <div class="item">
            <span class="num">13243</span>
            <span>完结数量(起)</span>
          </div>
        </div>
        <div class="main2" id="rcb4-chart"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ringChart, pieChart, barChart, areasChart } from '@/utils/charts.js'
import { onMounted } from 'vue'
const typeList = [
  {
    label: '取马蜂窝',
    value: '4324'
  },
  {
    label: '救灾抢险',
    value: '3345'
  },
  {
    label: '社会救援',
    value: '2354'
  },
  {
    label: '火灾',
    value: '103'
  }
]
onMounted(() => {
  ringChart('rcb1-chart')
  pieChart('rcb2-chart', { legend: 'right', size: '70%', center: '30%' })
  barChart('rcb3-chart')
  areasChart('rcb4-chart')
})
</script>
<style scoped lang="scss">
.rc-container {
  width: vw(490);
  height: vh(990);
  position: absolute;
  top: vh(80);
  right: vw(10);
  z-index: 2;
  background-color: yellow;
  background: url('@/assets/images/fullboxbg.png');
  background-size: 100% 100%;
  color: #fff;
}
.box-header {
  height: vh(40);
  text-indent: vw(40);
  letter-spacing: 1ch;
  font-size: vw(19);
  font-weight: 600;
  line-height: vh(40);
}
.box-content {
  height: vh(950);
  padding: vh(10);
}
.title {
  width: 100%;
  height: 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  color: #11e5c0;
}
.rc-box1 {
  height: vh(150);
  margin-top: vh(10);
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px 0;
  .main {
    width: 100%;
    height: 120px;
    display: flex;
    gap: 0 10px;
  }
  .left {
    width: 40%;
    height: 100%;
    border: 1px solid #157b71;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0 10px;
    .icon {
      width: 30px;
      height: 30px;
    }
    .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
    .num {
      font-size: 28px;
      font-weight: 600;
      font-style: italic;
    }
    .prec {
      color: #11e5c0;
      font-weight: 700;
    }
  }
  .right {
    width: 60%;
    height: 100%;
    background: url('@/assets/images/box-bg2.png');
    background-size: 100% 100%;
  }
}
.rc-box2 {
  height: vh(150);
  margin-top: vh(10);
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px 0;
  .main {
    width: 100%;
    height: 120px;
    display: flex;
    gap: 0 10px;
  }
  .left {
    width: 40%;
    height: 100%;
    border: 1px solid #157b71;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0 10px;
    .icon {
      width: 30px;
      height: 30px;
    }
    .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
    .num {
      font-size: 28px;
      font-weight: 600;
      font-style: italic;
    }
    .prec {
      color: #f00;
      font-weight: 700;
    }
  }
  .right {
    width: 60%;
    height: 100%;
    background: url('@/assets/images/box-bg2.png');
    background-size: 100% 100%;
  }
}
.rc-box3 {
  height: vh(230);
  margin-top: vh(10);
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px 0;
  .main {
    width: 100%;
    height: 170px;
    background: url('@/assets/images/box-bg2.png');
    background-size: 100% 100%;
  }
}
.rc-box4 {
  height: vh(350);
  margin-top: vh(10);
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .main1 {
    width: 100%;
    height: 100px;
    background-size: 100% 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 0 10px;
    .item {
      width: 50%;
      height: 70px;
      border: 1px solid #157b71;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #11e5c0;
    }
    .num {
      font-size: 28px;
      font-weight: 600;
      color: #fff;
      font-style: italic;
      line-height: 28px;
    }
  }
  .main2 {
    width: 100%;
    height: 210px;
    background: url('@/assets/images/box-bg2.png');
    background-size: 100% 100%;
  }
}
</style>
